<!-- 
  布局切换优化演示页面
  展示主题切换和布局切换的流畅效果
-->
<template>
  <div class="layout-demo-page p-6">
    
    <!-- 页面标题 -->
    <div class="mb-8">
      <h1 class="text-3xl font-bold mb-2">🚀 布局切换优化演示</h1>
      <p class="text-gray-500 dark:text-gray-400">
        体验丝滑的主题和布局切换效果
      </p>
    </div>

    <!-- 主题切换演示 -->
    <el-card class="mb-6" shadow="hover">
      <template #header>
        <div class="flex items-center justify-between">
          <span class="text-lg font-semibold">🎨 主题切换（圆形扩散动画）</span>
          <el-tag :type="isSupportViewTransition() ? 'success' : 'warning'">
            {{ isSupportViewTransition() ? '支持 View Transition API' : '降级方案' }}
          </el-tag>
        </div>
      </template>

      <div class="space-y-4">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          点击下方按钮体验从点击位置开始的圆形扩散动画效果：
        </p>

        <!-- 主题模式切换 -->
        <div class="flex gap-4 items-center">
          <span class="text-sm font-medium">主题模式：</span>
          <el-radio-group v-model="currentThemeMode" @change="handleThemeModeChange">
            <el-radio-button 
              v-for="option in themeModeOptions" 
              :key="option.value"
              :value="option.value"
            >
              {{ option.label }}
            </el-radio-button>
          </el-radio-group>
        </div>

        <!-- 快速切换按钮 -->
        <div class="flex gap-4 items-center">
          <span class="text-sm font-medium">快速切换：</span>
          <el-button 
            type="primary" 
            :icon="isDark ? 'Sunny' : 'Moon'"
            @click="toggleTheme"
          >
            切换为{{ isDark ? '浅色' : '深色' }}模式
          </el-button>
        </div>

        <!-- 当前状态显示 -->
        <el-alert 
          :type="isDark ? 'info' : 'success'" 
          :closable="false"
          show-icon
        >
          <template #title>
            当前状态：{{ isDark ? '深色模式 🌙' : '浅色模式 ☀️' }} 
            | 系统偏好：{{ systemTheme }}
          </template>
        </el-alert>
      </div>
    </el-card>

    <!-- 布局切换演示 -->
    <el-card class="mb-6" shadow="hover">
      <template #header>
        <span class="text-lg font-semibold">📐 布局模式切换（平滑过渡）</span>
      </template>

      <div class="space-y-4">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          切换布局模式时，系统会临时禁用过渡效果，避免所有元素同时过渡造成的闪烁：
        </p>

        <!-- 布局模式选择 -->
        <div class="flex gap-4 items-center flex-wrap">
          <span class="text-sm font-medium">布局模式：</span>
          <el-radio-group v-model="currentLayoutMode" @change="handleLayoutModeChange">
            <el-radio-button value="vertical">
              垂直布局
            </el-radio-button>
            <el-radio-button value="horizontal">
              水平布局
            </el-radio-button>
            <el-radio-button value="vertical-mix">
              垂直混合
            </el-radio-button>
            <el-radio-button value="horizontal-mix">
              水平混合
            </el-radio-button>
          </el-radio-group>
        </div>

        <!-- 当前布局状态 -->
        <el-alert type="info" :closable="false" show-icon>
          <template #title>
            当前布局：{{ getLayoutName(currentLayoutMode) }} 
            | 侧边栏：{{ layoutSetting.sidebarCollapsed ? '已折叠' : '已展开' }}
          </template>
        </el-alert>

        <!-- 侧边栏控制 -->
        <div class="flex gap-4">
          <el-button @click="toggleSidebar">
            {{ layoutSetting.sidebarCollapsed ? '展开' : '折叠' }}侧边栏
          </el-button>
          <el-switch
            v-model="layoutSetting.enableAnimation"
            active-text="启用动画"
            inactive-text="禁用动画"
          />
        </div>
      </div>
    </el-card>

    <!-- 主题颜色演示 -->
    <el-card shadow="hover">
      <template #header>
        <span class="text-lg font-semibold">🎨 主题颜色切换</span>
      </template>

      <div class="space-y-4">
        <p class="text-sm text-gray-600 dark:text-gray-300">
          主题色切换使用 CSS 变量，Element Plus 会自动生成相关色阶：
        </p>

        <!-- 预设颜色 -->
        <div class="flex gap-4 items-center flex-wrap">
          <span class="text-sm font-medium">预设颜色：</span>
          <div 
            v-for="(color, name) in themeColorOptions" 
            :key="name"
            class="color-item"
            :class="{ active: themeColor === color }"
            :style="{ backgroundColor: color }"
            @click="setThemeColor(color)"
            :title="name"
          >
            <el-icon v-if="themeColor === color" class="check-icon">
              <Check />
            </el-icon>
          </div>
        </div>

        <!-- 当前颜色 -->
        <el-alert type="success" :closable="false" show-icon>
          <template #title>
            当前主题色：{{ themeColor }}
          </template>
        </el-alert>

        <!-- 颜色效果演示 -->
        <div class="mt-6">
          <p class="text-sm font-medium mb-3">效果预览：</p>
          <div class="flex gap-4 flex-wrap">
            <el-button type="primary">Primary</el-button>
            <el-button type="primary" plain>Plain</el-button>
            <el-button type="primary" link>Link</el-button>
            <el-tag type="primary">Primary Tag</el-tag>
            <el-checkbox v-model="checked">Checkbox</el-checkbox>
            <el-switch v-model="switched" />
          </div>
        </div>
      </div>
    </el-card>

    <!-- 技术说明 -->
    <el-card class="mt-6" shadow="hover">
      <template #header>
        <span class="text-lg font-semibold">📖 技术说明</span>
      </template>

      <div class="space-y-3 text-sm">
        <div>
          <strong>View Transition API：</strong>
          <p class="text-gray-600 dark:text-gray-300 mt-1">
            现代浏览器支持的原生过渡动画 API，可以创建圆形扩散等高级动画效果。
            不支持的浏览器会自动降级为过渡禁用方案。
          </p>
        </div>
        
        <div>
          <strong>过渡禁用机制：</strong>
          <p class="text-gray-600 dark:text-gray-300 mt-1">
            在布局切换时临时禁用所有过渡效果，执行切换后使用双重 requestAnimationFrame 
            在正确时机恢复过渡，避免闪烁和卡顿。
          </p>
        </div>

        <div>
          <strong>统一动画系统：</strong>
          <p class="text-gray-600 dark:text-gray-300 mt-1">
            所有过渡动画使用 CSS 变量统一管理，支持响应式优化和用户偏好设置，
            并启用 GPU 加速提升性能。
          </p>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useTheme } from '@/composables/useTheme'
import { useLayoutManage } from '@/layouts/layoutManage'
import { isSupportViewTransition } from '@/utils/theme/animation'
import { Check } from '@element-plus/icons-vue'

// 主题管理
const { 
  themeMode, 
  themeColor, 
  isDark, 
  systemTheme,
  setThemeMode, 
  setThemeColor,
  themeModeOptions,
  themeColorOptions 
} = useTheme()

// 布局管理
const { 
  layoutSetting, 
  setLayoutMode,
  toggleSidebar 
} = useLayoutManage()

// 本地状态
const currentThemeMode = ref(themeMode.value)
const currentLayoutMode = ref(layoutSetting.value.mode)
const checked = ref(true)
const switched = ref(true)

// 主题模式切换（带动画）
const handleThemeModeChange = async (mode) => {
  // 注意：这里没有 event 参数，会使用降级方案
  await setThemeMode(mode)
}

// 快速切换主题（带动画）
const toggleTheme = async (event) => {
  const newMode = isDark.value ? 'light' : 'dark'
  // 传入 event 参数，使用圆形扩散动画
  await setThemeMode(newMode, event)
  currentThemeMode.value = newMode
}

// 布局模式切换
const handleLayoutModeChange = (mode) => {
  setLayoutMode(mode)
}

// 获取布局名称
const getLayoutName = (mode) => {
  const names = {
    'vertical': '垂直布局',
    'horizontal': '水平布局',
    'vertical-mix': '垂直混合布局',
    'horizontal-mix': '水平混合布局'
  }
  return names[mode] || mode
}
</script>

<style lang="scss" scoped>
.layout-demo-page {
  max-width: 1200px;
  margin: 0 auto;
}

.color-item {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  
  &:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  &.active {
    border-color: var(--el-color-primary);
    box-shadow: 0 0 0 3px rgba(var(--el-color-primary-rgb, 64, 158, 255), 0.2);
  }
  
  .check-icon {
    color: white;
    font-size: 20px;
    font-weight: bold;
  }
}
</style>
